mermaidで始める解説図解作成

所属している部署に関して正確に認知されているのかは常々気になるところですが、部署名が変わっても以前の部署名でコールされている場合は察するべきところでしょう。

部署で実施している施策も勿論ながら認知は怪しいものです。そこで、コードでのメンテナンスができる点を活かして、筆者自身の認識確認も含めて複数施策同士の相関図作成をmermaidにて試みました。単にノードを繋げただけでは判りづらかったため追加した、視認性を高める設定に関する備忘録となります。

図解向けに設定する

mermaid.jsで利用可能な多数タイプのうち、今回はgraphを選択しました。シーケンス図等もありますが、全体像把握にはプロセスの解説テキスト読み込みが必須になるためです。

classDefでのカスタムによってノード同士が重なることを防ぐため、事前にテーマを設定します。

graph TD
  %%{init:{'theme':'default','flowchart':{'rankSpacing':80}}}%%

今回指定しているrankSpacingは有無で以下の違いがでてきます。

指定あり	指定なし

リンクを設定する

施策に関する詳細を知りたいとき、図上からアクセスできれば快適です。ただし、ノード上でクリックできるのか判別し難いので、フォントの色やサイズ、枠線へ何らかの対処をいれましょう。

graph TD
  classDef page fill:#00FFFF,stroke-width:8px,font-size:16pt;
  A:::page
  click A href "https://www.notion.so/XXXXXX"

線とラベルの被り位置を長さ変更で調整

自動調整となるため意図した通りにはなり難いのですが、ある程度は読みやすくなります。

graph TD
  subgraph Box
    Test
  end
  Mermaid -...-> Test
  Mermaid2 -..-> Test

画像を差し込む

相対パスではなく、絶対パス限定となりますが、URL指定にて埋め込むことも可能です。

graph TD
      d("<img src='https://example.com/XXXX.png' />")

あとがき

mermaidはコードの修正で画を変更できるため、画像ファイルの差し替え不要が大きなメリットです。プレビュー結果のキャプチャによる活用もありでしょう。

フローチャートを作画したいものの、画像編集アプリの操作やファイル編集の手間が億劫な場合、手軽な選択肢の1つとしてmermaidをおすすめします。